<template>
  <div class="hawkContent" style="padding:0px;">
    <div class="topoHead">
      <div class="headLeft">

        <div class="topoList listHead">机房视图</div>
      </div>
      <div class="headContent" v-if="id || isAdd">
        <template-list @addNode="addNode" type="room" ref="nodeMenu">
        </template-list>
      </div>
      <div class="btns">
        <el-button type="primary" v-if="id || isAdd" @click="save">提交
        </el-button>
        <el-button type="hawkCreate" @click="createNew">新增机房视图</el-button>
      </div>
      <topo-list v-model="id" v-if="ciList.length > 0" :list="ciList"  ref="topoListRef"
                 ciType="room" @itemdelete="resetPage" @changeTopo=changeTopo>
      </topo-list>
    </div>

    <div class="empty" v-show="ciList.length == 0 && !isAdd">
      <img src="./components/image/nodata.png" style="width:178px;" />
      <div>暂无视图，请先去<span @click="createNew">新增视图</span></div>
    </div>
    <div v-if="changeTopoFlag">

      <div v-if="isAdd || id != ''">
        <component :is="currentTabComponent" :id="id" :isAdd="isAdd"
                   :isPreview="false" type="business" ref="topo"
                   @change="isChange = true"></component>
      </div>
    </div>

    <el-dialog title="保存视图" :visible.sync="addDialogVisible" width="50%"
               :close-on-click-modal="false" @close="
        addDialogVisible = false
        name = ''
      ">
      <!-- 内容主题区 -->
      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef"
               label-width="90px">
        <el-form-item label="视图名称" prop="name">
          <el-input v-model="addForm.name" placeholder="请输入视图名称"
                    @keydown.enter="sub"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="
            addDialogVisible = false
            name = ''
          ">取 消</el-button>
        <el-button type="primary" @click="sub">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script type="text/javascript">
/*
 * @author 宋辉辉
 * @description 机房视图的视图层
 * @api 后台接口地址
 * @since 2021年11月10日16:21:49
 * @update 2021年11月10日16:21:54
 * @modifier 宋辉辉
 * @bug 无
 * @version v1.0.0
 */
import { getList } from '@/api/assets/ci/room'
import topoPannel from './components/topoPannel.vue'
import { doEdit, doAdd } from '@/api/assets/ci/room'
import topoList from './components/topoList.vue'
import TemplateList from './components/templateList.vue'

export default {
  components: { topoList, topoPannel, TemplateList },
  data () {
    return {
      addDialogVisible: false,
      id: 0,
      node: {},
      changeTopoFlag: true,
      addForm: {
        name: ''
      },
      addFormRules: {
        name: [{ required: true, message: '请输入视图名称', trigger: 'blur' }]
      },
      isAdd: false,
      queryForm: {
        query: {
          name: '',
          type: 0
        },
        page: {
          current: 1,
          size: 10
        }
      },
      isChange: false,
      ciList: [],
      total: 0,
      filterText: ''
    }
  },
  computed: {
    currentTabComponent () {
      if (this.id == 0 && this.isAdd == false) {
        return ''
      } else {
        return 'topoPannel'
      }
    }
  },
  created () {
    console.log(this.$route.params);
    this.init()

    if (this.$route.params && this.$route.params.ciId) {
      this.$nextTick(() => {
        this.id = this.$route.params.ciId
      })
    }

    this.$eventHub.$on('ci-search-name', this.searchByName)
  },
  methods: {
    // 删除条目以后，刷新页面
    resetPage(){
      this.data = this.$options.data()
      this.changeTopoFlag = false
      this.init()

    },
    searchByName (type, name) {
      if (type != 'room') {
        return
      }
      console.log('rsearch:: ' + name);
      this.queryForm.query.name = name
      this.init()

    },
    addNode (evt, nodeMenu, mousePosition) {
      this.$refs.topo.addNode(evt, nodeMenu, mousePosition)
    },
    handleCurrentChange (val) {
      this.queryForm.page.current = val
      this.init()
    },

    changeTopo (id) {
      console.log(id);
      let nextId = id
      this.changeTopoFlag = false
      this.$nextTick(() => {

        this.changeTopoFlag = true
        this.$nextTick(() => {
          this.isAdd = false
          this.id = nextId
        })
      })
    },
    createNew () {
      this.id = 0
      this.isAdd = false
      this.$nextTick(() => {
        this.isAdd = true
        this.isChange = true

        this.changeTopoFlag = true

        this.$nextTick(() => {
          this.$refs.topo.createNew(0)
        })
      })
    },
    handleNodeClick (node) {
      if (this.isChange) {
        this.$confirm('有修改尚未提交，是否提交?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.save()
            this.node = node
          })
          .catch(() => { })
      } else {
        this.id = node.id
        this.isAdd = false
      }
    },
    async save () {
      let data = this.$refs.topo.getNodeData()
      console.log(data);
      if (data.id) {
        const ret = await doEdit(data)
        if (ret.code == 20000) {

          this.$message.success("修改成功")
          this.isChange = false
          this.isAdd = false
        }
      } else {
        this.addDialogVisible = true
      }
    },
    async sub () {
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) return


        let data = this.$refs.topo.getNodeData()
        data.name = this.addForm.name
        console.log(JSON.stringify(data));
        data.businessid = null
        data.roomid = data.nodeList.find(el => {
          return el.nodeType == "room"
        }).viewData.id


        let ret = await doAdd(data)
        console.log(ret);

        this.addForm.name = ''
        this.addDialogVisible = false
        this.isChange = false
        this.isAdd = false

        this.init()

      })

    },
    async init () {
      // 根据名称 查询 机房视图
      console.log("111");
      const ret = await getList(this.queryForm)
      console.log(ret);
      if (ret.code == 20000) {
        this.ciList = ret.data
        this.total = this.ciList.length
      }
    },

    filterNode (value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    }
  },
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    }
  }
}
</script>
<style scoped lang="scss">
.filter-tree {
  height: 78vh;
}
.btns {
  display: flex;
  justify-content: flex-end;
  padding: 5px 10px;
}
.topoHead {
  height: 60px;
  padding: 0 20px;
  border-bottom: 1px solid #eeeeee;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  .headLeft {
    display: flex;
    .listHead {
      color: #333333;
      font-size: 16px;
      display: flex;
      align-items: center;
      span {
        margin-left: 9px;
        color: #00a1d8;
        font-size: 12px;
        cursor: pointer;
      }
    }
    .topoList {
      width: 200px;
    }
  }
}
.empty {
  height: calc(100vh - 141px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999999;
  font-size: 12px;
  img {
    margin-bottom: 10px;
  }
  span {
    color: #00a1d8;
    cursor: pointer;
  }
}
</style>